import React, { Component } from 'react'
import './App.css'

let isPink = true
let list = [{ name: '王五' }, { name: '李四' }, { name: '张三' }]

class App extends Component {
  constructor(prop) {
    super(prop)
    this.state = {
      num: 0
    }
  }

  render() {
    return (
      <>
        Hello,world!
        <input type="text" />
        <div className="box1"></div>
        <div className="box" style={{ backgroundColor: isPink ? 'pink' : 'yellow' }}>
          {this.state.num}
        </div>
        <ul>
          {list.map((item, index) => {
            return <li key={index}>{item.name}</li>
          })}
        </ul>
        <button
          onClick={() => {
            this.setState({ num: this.state.num + 1 })
          }}
        >
          按钮1
        </button>
        <button onClick={() => this.add()}>按钮2</button>
        <button onClick={this.add.bind(this)}>按钮3</button>
      </>
    )
  }

  add() {
    this.setState({ num: this.state.num + 1 })
  }
}

export default App
